<template>
	<div>
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" destroy-on-close width="769px">
			<el-form
				ref="dialogFormRef"
				v-loading.fullscreen.lock="state.dialog.loading"
				:rules="rules"
				:model="state.ruleForm"
				size="default"
				label-width="120px"
			>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="标题" prop="zh_t">
							<el-input v-model="state.ruleForm.zh_t" placeholder="请输入标题名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="(英文)标题名称" prop="en_t">
							<el-input v-model="state.ruleForm.en_t" placeholder="请输入英文标题名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="图片" prop="images">
							<!-- <el-input v-model="state.ruleForm.zh_t" placeholder="请输入标题名称" clearable></el-input> -->
							<OssUpload v-model:fileLists="state.ruleForm.images"></OssUpload>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="内容" prop="zh_content">
							<!-- <el-input v-model="state.ruleForm.zh_content" placeholder="请输入内容" clearable></el-input> -->
							<Editor v-model:get-html="state.ruleForm.zh_content" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="(英文)内容" prop="en_content">
							<!-- <el-input v-model="state.ruleForm.en_content" placeholder="请输入英文内容" clearable></el-input> -->
							<Editor v-model:get-html="state.ruleForm.en_content" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemUserDialog">
import { defineAsyncComponent, nextTick, reactive, ref } from 'vue';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import OssUpload from '/@/components/upload/index.vue';
import { useContentApi } from '/@/api/content';
import { setFileList } from '/@/utils/oss';
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();
const state = reactive<{
	ruleForm: ContentFormSchema;
	dialog: any;
}>({
	ruleForm: {
		zh_t: '',
		en_t: '',
		zh_content: '',
		en_content: '',
		p_id: '',
		lang: 'zh',
		sort: 1,
		images: [],
	},
	dialog: {
		isShowDialog: false,
		type: 'add',
		title: '',
		submitTxt: '',
		loading: false,
	},
});

const rules = reactive<FormRules>({
	zh_t: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	en_t: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	// zh_content: [
	// 	{
	// 		required: true,
	// 		message: '请输入',
	// 		trigger: 'blur',
	// 	},
	// ],
	// en_content: [
	// 	{
	// 		required: true,
	// 		message: '请输入',
	// 		trigger: 'blur',
	// 	},
	// ],
});

// 打开弹窗
const openDialog = async (type: string, row: any) => {
	state.dialog.type = type;
	if (type === 'edit') {
		state.dialog.isShowDialog = true;
		nextTick(() => {
			state.dialog.loading = true;
		});
		const { result } = await useContentApi().detail(row.id);
		const oData = result?.[0] ?? {};
		state.ruleForm = {
			...oData,
			images: oData.images ? setFileList(oData.images) : [],
		};
		state.dialog.title = '修 改';
		state.dialog.submitTxt = '修 改';
		state.dialog.loading = false;
	} else {
		state.dialog.title = '新 增';
		state.dialog.submitTxt = '新 增';
		// 清空表单，此项需加表单验证才能使用
		nextTick(() => {
			dialogFormRef.value.resetFields();
		});
		state.ruleForm = {
			zh_t: '',
			en_t: '',
			zh_content: '',
			en_content: '',
			p_id: '',
			lang: 'zh',
			sort: 1,
			images: [],
		};
		if (type === 'addChild') {
			state.ruleForm.p_id = row.id;
		}
		state.dialog.isShowDialog = true;
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = async () => {
	dialogFormRef.value.validate(async (valid: any) => {
		if (valid) {
			console.log('submit!');
			const oForm = {
				...state.ruleForm,
				images: state.ruleForm.images.length ? state.ruleForm.images.map((item: any) => item.fileName).join(';') : '',
			};
			if (state.dialog.type === 'add' || state.dialog.type === 'addChild') {
				await useContentApi().add(oForm);
				ElMessage.success('添加成功');
			} else {
				await useContentApi().edit(state.ruleForm.id as number, oForm);
				ElMessage.success('修改成功');
			}
			emit('refresh');
			closeDialog();
		}
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
